<%--
  Created by IntelliJ IDEA.
  User: 29460
  Date: 2020/11/10
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>增加一个新的商品资料</title>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div id="tree1" style="display: none"></div>

<!--  Add  Content Form begin -->
<div id="contentFormDiv">
    <form class="layui-form"  style="margin: 20px 10px"  id="contentAddForm" >
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <button class="layui-btn" id="openBtn">打开</button><input type="hidden" class="layui-input" name="categoryId" id="categoryId"/>
                <span id="categoryName"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">子标题</label>
            <div class="layui-input-block">
                <input type="text" name="subTitle" required  lay-verify="required" placeholder="请输入工资" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">说明</label>
            <div class="layui-input-block">
                <input type="text" name="titleDesc" required  lay-verify="required" placeholder="请输入工资" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input type="text" name="url" required  lay-verify="required" placeholder="请输入工资" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片1</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button><img  id="img1" width="50" height="50">
                <input type="hidden" name="pic" id="pic" required  lay-verify="required" placeholder="请输入工资" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片2</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload2">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button><img  id="img2" width="50" height="50">
                <input type="hidden" name="pic2" id="pic2" required  lay-verify="required" placeholder="请输入工资" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容说明</label>
            <div class="layui-input-block">
                <input type="text" name="content" required  lay-verify="required" placeholder="请输入工资" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="contentAddFormFilter">增加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
    layui.use(['form','upload','layer','tree'],function () {
        var form = layui.form;
        var upload=layui.upload;
        var layer=layui.layer;
        var tree=layui.tree;

        //1.完成上传的设置
        upload.render({
            elem:'#upload1',
            url:'upload',//上传
            //auto:false, // 当你选择一个图片，就已经上传了
            done:function (resp) {//map[path]
                $("#pic").val(resp.path);
                $("#img1").prop("src",resp.path);
            }
        });

        //2.完成上传的设置
        upload.render({
            elem:'#upload2',
            url:'upload',
            //auto:false, // 当你选择一个图片，就已经上传了
            done:function (resp) {
                $("#pic2").val(resp.path);
                $("#img2").prop("src",resp.path);
            }
        });
        //3.初始化树，树上显示所有内容分类
        var treeInst= tree.render({
            elem: '#tree1',
            data: [],
            click:function (obj) {
                console.log(obj.data);
                $("#categoryId").val(obj.data.id);
                $("#categoryName").text(obj.data.title);
                layer.closeAll();
            }
        });
        //向服务发请求，填充树的内容
        //2.向服务器发请求取原始数据{id,title,pid}  List<TreeNode>
        $.ajax({
            url:'tbc/tree',
            type:'post',
            dataType:'json',
            success:function (resp) {//[{id:101,title:'abc',pid:0]
                fn(resp.data);//对原始数据处理
                treeInst.reload({
                    data:resultObj//将处理后的结果赋值的data[数据源]
                })
            }

        });
        var resultObj=[];
        function fn(jsonData) {
            //取得顶级的数据
            for(var i=0;i<jsonData.length;i++){
                if(jsonData[i].pid===0){
                    resultObj.push(jsonData[i]);
                }
            }
            getChildren(resultObj, jsonData)
        }

        function getChildren(nodeList, jsonData) {
            nodeList.forEach(function(elemet, index) {
                elemet.children = jsonData.filter(function(item, indexI) {
                    return item.pid === elemet.id
                });
                if(elemet.children.length > 0) {
                    getChildren(elemet.children, jsonData)
                }
            })
        }

        //4.打树节点
        $("#openBtn").click(function () {
            layer.open({
                type:1,
                title:'选择分类',
                area:['500px','400px'],
                content:$("#tree1")
            });
        });

        //5.完成表单提交
        form.on('submit(contentAddFormFilter)',function () {
            $.ajax({
                type:"post",
                url:'tb/content/add',//接受一个Emp类型的对象来封装表单元素中的值
                // data:"empno="+data.field.empno+"&ename="+data.field.ename+"&salary="+data.field.salary,
                data:$("#contentAddForm").serialize(),
                success:function (resp) {
                    //清空表单中的数据
                    $("#contentAddForm")[0].reset();
                    layer.msg("增加成功!")
                },
                dataType:"json"
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })
    });
</script>
</body>
</html>
